尤雨溪表示：

其实我在最开始想的名字是 seed.js，但在 NPM 上已经被注册了，所以就想这个是一个 视图的库 ，但是直接叫他的英文“view”有点太直接了，于是我把“view”这个单词放进谷歌翻译中，然后发现他的法语翻译只有三个字母，这看起来很棒，并且没有被注册，所以就在 2013 年 6 月在 NPM 进行了注册

(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的 渐进式框架
与其它大型框架不同的是，Vue 被设计为可以 ` 自底向上逐层应用
Vue 的核心库 只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

可以一点一点地使用它，只用一部分，也可以整个工程都使用它, 放入多少就使用多少

官网中文：https://cn.vuejs.org/
官网英文：https://vuejs.org/
使用文档：https://cn.vuejs.org/v2/guide/

易用：通过 HTML、CSS、JavaScript 构建应用
灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩
高效：20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化

MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种 事件驱动编程方式

Model：vue 对象的 data 属性里面的数据，这里的数据要显示到页面中
View：vue 中数据要显示的 HTML 页面，在 vue 中，也称之为“视图模板”（HTML+CSS）
ViewModel：vue 中编写代码时的 vm 对象，它是 vue.js 的核心，负责连接 View 和 Model 数据的中转，保证视图和数据的一致性，所以前面代码中，data 里面的数据被显示中 p 标签中就是 vm 对象自动完成的（ 双向数据绑定：JS 中变量变了，HTML 中数据也跟着改变）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入 vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<!-- view : 视图模板, 展示数据 -->
<div id="app">
    {{msg}}
</div>

</body>
<script>
    // vm : view-model, 负责时刻保证视图模板中的数据和 data 里面的数据一致
    var vm = new Vue({
        el:'#app',
        data:{  // data : Model, 模型里的所有数据, 是 vm 对象的属性
            'msg':'Hello word!'
        }
    })
</script>
</html>

低耦合 ： 视图 （View）可以 独立于 Model 变化和修改，1 个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变
可复用 ：可以把一些视图逻辑放在 1 个 ViewModel 中，让很多 View 重用这端视图的逻辑（以此减少代码冗余）
独立开发 ： 开发 人员可以专注于 业务逻辑 和数据的开发 （ViewModel）， 设计 人员可以专注于 页面设计
可测试 ：界面元素是比较难以测试的，而现在的测试可以 针对 ViewModel来编写

01 Vue 入门介绍

类似于 DTL(Django Template Language) 中的 inclusion_tag, 每一个组件的内容都可以被替换和复用

01 Vue 入门介绍

只需要 1 个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有一个index.html

1.X：使用得较少
2.X：普遍使用 (我们学习就使用这个)
3.X：刚出没多久，只有 Beta 版

jQuery 的定位是获取元素和完成特效
vue 的定位是方便操作和控制数据和完成特效

开发版本 : https://cn.vuejs.org/js/vue.js
生产版本 : https://cn.vuejs.org/js/vue.min.js

ps : 在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

本地引入 : 下载好 vue.js 直接在 script 标签内链接本地路径

<script src="js/vue.js"></script>

CDN 引入 : 可以引入最新版本, 也可以指定版本号

# 引入最新版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

# 指定版本号
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入 vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>

<div id="app">
    {{msg}}
</div>

</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{'msg':'Hello word!'}
    })
</script>
</html>

01 Vue 入门介绍

vm.$data.msg='年后'
vm._data.msg='年后'
vm.msg='年后'

01 Vue 入门介绍

javascript : 它是一门解释型语言，只能运行在浏览器中，浏览器里有它的解释器
所以在浏览器的 Console 中输入命令，就和在 cmd 中输入 python 后，进入交互式环境一样

它是一们后端语言
node 是一个解释器, 将谷歌的 V8 引擎抠出来, 运行在操作系统之上, c 写了一些底层包
可以用来写 javascript 代码
node 相当于 Python
npm 模块管理工具, 相当于 pip

有些前端工程师，不用学后端语言，只会 js，就可以写后端了

正文完

vue

发表至： Vue 前端

2023-06-16

转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。

05 Vue 虚拟DOM与Diff算法简介

01 Vue 入门介绍

引入

1. 前端发展

一.Vue 介绍

1.Vue.js 框架的发展历程

2.vue 介绍

3. 渐进式框架

4. 网址

5.Vue 特点

二.Vue.js 的 M-V-VM 思想

1.MVVM 介绍

2.MVVM 的特性

3.MVVM 的逻辑

三. 组件开发 & 单页面开发

1. 组件化开发

2. 单页面开发

四.vue.js 的快速入门使用

1. 版本选择

2.vue.js 与 jQuery 的定位

3.vue.js 的下载

4.vue.js 的引入方式

5. 使用 vue 展示 "Hello word!"

6. 验证数据的双向绑定

五.nodejs 介绍

1.js 语言

2.nodejs 语言

01 计算机核心基础

09 跨域请求详解

07 Vue 组件化开发介绍

06 进程管理

21 Django之settings源码分析